<template>
  <el-dialog
    v-if="openForm"
    v-model="openBoole"
    :close-on-click-modal="false"
    custom-class="mydialog"
    width="500px"
    title="修改密码"
    @close="close"
  >
    <el-form
      ref="openRef"
      :model="openForm"
      :rules="rules"
      label-width="140px"
      size="small"
    >
      <el-form-item label="当前姓名：">
        {{ userInfo.realName }}
      </el-form-item>

      <el-form-item
        label="当前密码："
        prop="oldPassword"
      >
        <el-input
          v-model="openForm.oldPassword"
          clearable
          show-password
          placeholder="请输入密码"
        />
      </el-form-item>

      <el-form-item
        label="设置新密码："
        prop="newPassword"
      >
        <el-input
          v-model="openForm.newPassword"
          clearable
          show-password
          placeholder="请输入新密码"
        />
      </el-form-item>

      <el-form-item
        label="再次设置新密码："
        prop="nextNewPassword"
      >
        <el-input
          v-model="openForm.nextNewPassword"
          clearable
          show-password
          placeholder="请再次输入新密码"
        />
      </el-form-item>

      <div
        class="dialog-footer"
        style="display:flex;justify-content:center;align-items:center;"
      >
        <el-button
          class="border-btn"
          size="small"
          style="margin-right: 20px;"
          @click="close"
        >
          取消
        </el-button>

        <el-button
          class="main-btn"
          size="small"
          type="primary"
          @click="handlSubmit"
        >
          保存修改
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import {passsWord} from '@/utils/validate.js'
import {getPassword} from '@/api/user'

export default {
  name: 'Password',
  data() {
    const oldPasswordPass = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入密码'))
      } else {
        if (passsWord(value)) {
          return callback(new Error('请输入6到12包含字母数字的密码'))
        } else {
          callback()
        }
      }
    }
    const nextNewPasswordPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (value === this.openForm.newPassword) {
          callback()
        } else {
          callback(new Error('密码不正确请输入设置后密码'))
        }
      }
    }
    return {
      openBoole: false,
      openForm: {
        oldPassword: '',
        newPassword: '',
        nextNewPassword: '',
      },
      rules: {
        oldPassword: [
          { required: true, validator: oldPasswordPass, trigger: 'blur' },
        ],
        newPassword: [
          { required: true, validator: oldPasswordPass, trigger: 'blur' },
        ],
        nextNewPassword: [
          { required: true, validator: nextNewPasswordPass, trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    ...mapGetters('user', ['userInfo', 'sideMode', 'baseColor']),
  },

  methods: {
    ...mapActions('user', ['LoginOut', 'GetUserInfo']),
    open() {
      this.openBoole = true
    },

    close() {
      this.openBoole = false
      this.$refs.openRef.clearValidate()
      this.$refs.openRef.resetFields()
    },

    handlSubmit() {
      this.$refs.openRef.validate((valid) => {
        if (valid) {
          getPassword(this.openForm).then((res) => {
            if (res.code === 0) {
              this.$message.success('修改成功')
              this.$store.dispatch('user/LoginOut')
              this.close()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
  },
}
</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>
